<!DOCTYPE html>
<html lang="zh-cn">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Zhou Wei <zromyk@163.com>">
  <title>Git基本使用方法</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/style/html/pure.css">
  <link rel="stylesheet" href="/style/html/main.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  <!-- <link rel="stylesheet" href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css"> -->
<link rel="stylesheet" href="/style/article/highlight/default.min.css">
<link rel="stylesheet" href="/style/article/pell-1.0.6/dist/pell.css">

</head>
<body>
  <div id="menu-background"></div>
  <div id="menu">
    <div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list block-middle">
    <li class="pure-menu-item">
  <a class="pure-menu-heading" href="/index.html">ZROMYK</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="/index.html">主页</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="/public/archive/index.html">归档</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="/public/download/index.html">下载</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="/public/feedback/index.html">反馈</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="/public/about/index.html">关于我</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link" href="https://github.com/zromyk"><i class="fa fa-github" style="font-size:32px"></i></a>
</li>

  </ul>
</div>

  </div>
  <div id="layout">
    <div class="content">
      <div id="nav">
    <div id="navigation" class="navigation">
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
  <a class="pure-menu-link nav2" onclick="animateByNav()" href="#_1">一、常见问题整理：</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav2" onclick="animateByNav()" href="#_2">二、基本用法</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav2" onclick="animateByNav()" href="#_3">三、提交、分支、合并</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#1-diff">1. diff</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#commit">commit</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#branch">branch</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#checkout">checkout</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#merge">merge</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#cherry-pick">cherry-pick</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#rebase">rebase</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav2" onclick="animateByNav()" href="#_4">四、日志查看</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#log">log</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#blame">blame</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav2" onclick="animateByNav()" href="#_5">五、远程操作</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#remote">remote</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#fetch">fetch</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#pull">pull</a>
</li>
<li class="pure-menu-item">
  <a class="pure-menu-link nav3" onclick="animateByNav()" href="#push">push</a>
</li>

  </ul>
</div>

</div>
<div id="content-articles">
  <h1 id="Git基本使用方法" class="content-subhead">Git基本使用方法</h1>
  <p>
    <span>2021-03-22</span>
    <span><span class="post-category post-category-git">Git</span></span>
    <button id="button-markdownEditor" class="pure-button" onclick="markdownEditor()">启用编辑</button>
    <button id="button-save" class="pure-button" onclick="save()">保存</button>
  </p>
  <div id="content-articles-markdownEditor" style="display: none;">
    <h1>编辑 power by pell</h1>
    <div id="editor" class="pell"></div>
    <div style="margin-top:20px;">
        <h3>Text output:</h3>
        <div id="text-output"></div>
    </div>
    <div style="margin-top:20px;">
        <h3>HTML output:</h3>
        <pre id="html-output"></pre>
    </div>
  </div>
  <div id="content-articles-markdown">
    <h2 id="_1">一、常见问题整理：</h2>
<h6 id="1-git">1. git 查看远程仓库地址</h6>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git remote -v
</code></span></code></pre>
<p>修改远程仓库：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell"># 方法一: 
git remote set-url origin (url)

# 方法二（先删除后添加）: 
git remote rm origin 
git remote add origin (url)
</code></span></code></pre>
<h6 id="2">2. 文件跟踪问题</h6>
<p>Git 查看跟踪的文件：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git ls-tree -r --name-only (branch)
</code></span></code></pre>
<p>常用参数解释：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git ls-tree (branch)

[-d]: 只显示文件夹.
[-r]: 递归显示.
[-l]: 显示文件大小.
[--name-only]: 仅列出文件名.
</code></span></code></pre>
<h6 id="3">3. 提交账号设置</h6>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git config --global user.name ('name')
git config --global user.email (email)
</code></span></code></pre>
<h2 id="_2">二、基本用法</h2>
<p>1.初始化仓库</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git init
</code></span></code></pre>
<p>或者克隆一个远程仓库</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git clone (url)
</code></span></code></pre>
<p>2.添加文件到暂存区 ( stage )</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git add (file1) [file2] ...
git add (dir)
git add .
</code></span></code></pre>
<p>3.删除暂存区和工作区的文件</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git rm (file)

[-f]:       强制删除.
[--cached]: 把文件从暂存区域移除，但仍然希望保留在当前工作目录中，即从跟踪清单中删除.
</code></span></code></pre>
<blockquote class="content-quote">
<p>以下内容引用自 <a href="http://marklodato.github.io/visual-git-guide/index-zh-cn.html">[git 图解]: http://marklodato.github.io/visual-git-guide/index-zh-cn.html</a></p>
</blockquote>
<div class="pure-table-scrollable"><table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>基本指令</th>
<th>快捷指令</th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/basic-usage.svg" /></td>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/basic-usage-2.svg" /></td>
</tr>
</tbody>
</table></div>
<h2 id="_3">三、提交、分支、合并</h2>
<h3 id="1-diff">1. diff</h3>
<p>查看两次提交之间的变动。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/diff.svg" alt="img" style="zoom:50%;" /></p>
<h3 id="commit">commit</h3>
<p>提交暂存区文件到版本库 ( 本地仓库 )</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git commit -m (&quot;message&quot;)
git commit (file1) [file2] ... -m (&quot;message&quot;) # 提交暂存区的指定文件到仓库区

[-a]: 设置修改文件后不需要执行 git add 命令，直接来提交.
</code></span></code></pre>
<div class="pure-table-scrollable"><table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>正常提交</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/commit-main.svg" /></td>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/commit-stable.svg" /></td>
</tr>
<tr>
<td>git 用暂存区域的文件创建一个新的提交，并把此时的节点设为父节点。</td>
<td>在 <em>main</em> 分支的祖父节点 <em>stable</em> 分支进行一次提交，生成了<em>1800b</em>。 <em>stable</em> 分支就不再是 <em>main</em> 分支的祖父节点。需要通过 <strong>合并</strong> (或者 <strong>衍合</strong>) 回到主分支。</td>
</tr>
<tr>
<td><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/commit-amend.svg" alt="img" style="zoom:50%;" /></td>
<td></td>
</tr>
<tr>
<td><span style="overflow-x: auto; max-width:100%; display:inline;"><code>git commit --amend</code></span> : 用暂存区覆盖最后一次提交。</td>
<td></td>
</tr>
</tbody>
</table></div>
<h3 id="branch">branch</h3>
<p>创建新分支：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git branch (new branch)
</code></span></code></pre>
<p>删除分支：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git branch -d (branch)
</code></span></code></pre>
<p>列出分支：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git branch
</code></span></code></pre>
<h3 id="checkout">checkout</h3>
<p>创建新分支并转换到该新分支：</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git checkout -b (new branch)
</code></span></code></pre>
<div class="pure-table-scrollable"><table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>切换分支</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/checkout-files.svg" /></td>
<td></td>
</tr>
<tr>
<td><span style="overflow-x: auto; max-width:100%; display:inline;"><code>git checkout HEAD~ files</code></span> : 将提交节点 <strong>HEAD~</strong> （即当前提交节点的父节点）中的文件复制到工作目录并且加到暂存区域中。</td>
<td></td>
</tr>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/checkout-branch.svg" /></td>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/checkout-detached.svg" /></td>
</tr>
<tr>
<td><span style="overflow-x: auto; max-width:100%; display:inline;"><code>git checkout stable</code></span> 切换分支。</td>
<td>如果既 没有指定文件名，也 没有指定分支名，而是一个标签、远程分支、SHA-1值或者是像 <em>main~3</em> 类似的东西，就得到一个匿名分支，称作 <strong>detached HEAD</strong>（被分离的 <strong>HEAD</strong> 标识）。</td>
</tr>
</tbody>
</table></div>
<div class="pure-table-scrollable"><table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>HEAD标识处于分离状态时提交以及切换</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/commit-detached.svg" /></td>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/checkout-after-detached.svg" /></td>
</tr>
<tr>
<td>当 <strong>HEAD</strong> 处于分离状态（不依附于任一分支）时，提交操作可以正常进行，但是不会更新任何已命名的分支。(你可以认为这是在更新一个匿名分支。)</td>
<td>一旦此后你切换到别的分支，比如说 <em>main</em>，那么这个提交节点（可能）再也不会被引用到，然后就会被丢弃掉了。注意这个命令之后就不会有东西引用 <em>2eecb</em>。</td>
</tr>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/checkout-b-detached.svg" /></td>
<td></td>
</tr>
<tr>
<td>如果你想保存这个状态，可以用命令 <span style="overflow-x: auto; max-width:100%; display:inline;"><code>git checkout -b name</code></span> 来创建一个新的分支。</td>
<td></td>
</tr>
<tr>
<td>### reset</td>
<td></td>
</tr>
</tbody>
</table></div>
<p>reset命令把当前分支指向另一个位置，并且有选择的变动工作目录和索引。也用来在从历史仓库中复制文件到索引，而不动工作目录。如果不给选项，那么当前分支指向到那个提交。</p>
<div class="pure-table-scrollable"><table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/reset-commit.svg" /></td>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/reset.svg" /></td>
</tr>
<tr>
<td>如果用<span style="overflow-x: auto; max-width:100%; display:inline;"><code>--hard</code></span>选项，那么工作目录也更新；如果用<span style="overflow-x: auto; max-width:100%; display:inline;"><code>--soft</code></span>选项，那么都不变。</td>
<td>如果没有给出提交点的版本号，那么默认用 <strong>HEAD</strong>。这样，分支指向不变，但是索引会回滚到最后一次提交，如果用 <span style="overflow-x: auto; max-width:100%; display:inline;"><code>--hard</code></span> 选项，工作目录也同样。</td>
</tr>
<tr>
<td><img class="pure-img" alt="img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/reset-files.svg" /></td>
<td></td>
</tr>
<tr>
<td>如果给了文件名(或者 <span style="overflow-x: auto; max-width:100%; display:inline;"><code>-p</code></span> 选项), 那么工作效果和带文件名的 <span style="overflow-x: auto; max-width:100%; display:inline;"><code>checkout</code></span> 差不多，除了索引被更新。</td>
<td></td>
</tr>
</tbody>
</table></div>
<h3 id="merge">merge</h3>
<p><span style="overflow-x: auto; max-width:100%; display:inline;"><code>merge</code></span> 命令把不同分支合并起来。</p>
<p>合并前，索引必须和当前提交相同。</p>
<p>如果另一个分支是当前提交的祖父节点，那么合并命令将什么也不做。 </p>
<p>另一种情况是如果当前提交是另一个分支的祖父节点，就导致<em>fast-forward</em>合并。指向只是简单的移动，并生成一个新的提交。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/merge-ff.svg" alt="img" style="zoom:50%;" /></p>
<p>否则就是一次真正的合并。</p>
<p>默认把当前提交 (<em>ed489</em> 如下所示) 和另一个提交 (<em>33104</em>) 以及他们的共同祖父节点(<em>b325c</em>) 进行一次 <strong>三方合并</strong>。</p>
<p>结果是先保存当前目录和索引，然后和父节点 (<em>33104</em>) 一起做一次新提交。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/merge.svg" alt="img" style="zoom:50%;" /></p>
<h3 id="cherry-pick">cherry-pick</h3>
<p><span style="overflow-x: auto; max-width:100%; display:inline;"><code>cherry-pick</code></span> 命令&rdquo;复制&rdquo;一个提交节点并在当前分支做一次完全一样的新提交。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/cherry-pick.svg" alt="img" style="zoom:50%;" /></p>
<h3 id="rebase">rebase</h3>
<p>衍合是合并命令的另一种选择。</p>
<p>合并把两个父分支合并进行一次提交，提交历史不是线性的。</p>
<p>衍合在当前分支上重演另一个分支的历史，提交历史是线性的。 本质上，这是线性化的自动的 cherry-pick。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/rebase.svg" alt="img" style="zoom:50%;" /></p>
<p>上面的命令都在 <em>topic</em> 分支中进行，而不是 <em>main</em> 分支，在 <em>main</em> 分支上重演，并且把分支指向新的节点。</p>
<p>注意旧提交没有被引用，将被回收 (<em>169a6</em>、<em>2c33a</em>)。</p>
<p>要限制回滚范围，使用<span style="overflow-x: auto; max-width:100%; display:inline;"><code>--onto</code></span>选项。</p>
<p>下面的命令在 <em>main</em> 分支上重演当前分支从 <em>169a6</em> 以来的最近几个提交，即 <em>2c33a</em>。</p>
<p><img class="pure-img" src="https://zromyk.gitee.io/myblog-figurebed/post/Git基本使用方法.assets/rebase-onto.svg" alt="img" style="zoom:50%;" /></p>
<h2 id="_4">四、日志查看</h2>
<blockquote class="content-quote">
<p>Mac 上可视化查看日志和分支的软件： <a href="https://github.com/git-up/GitUp">[GitUp]：https://github.com/git-up/GitUp</a></p>
</blockquote>
<h3 id="log">log</h3>
<p>查看历史提交记录.</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git log

[--oneline]:    查看历史记录的简洁的版本.
[--graph]:      查看历史中什么时候出现了分支、合并.
[ --reverse]:   逆向显示所有日志.
[--author]:     查找指定用户的提交日志.
</code></span></code></pre>
<h3 id="blame">blame</h3>
<p>以列表形式查看指定文件的历史修改记录.</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git blame (file)
</code></span></code></pre>
<h2 id="_5">五、远程操作</h2>
<h3 id="remote">remote</h3>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git remote -v # 显示所有远程仓库
git remote show (remote) # 显示某个远程仓库的信息
git remote add (local repository) (url) # 添加远程版本库
git remote rm name  # 删除远程仓库
git remote rename old_name new_name  # 修改仓库名
</code></span></code></pre>
<h3 id="fetch">fetch</h3>
<p>从远程获取代码库.</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git fetch [alias] # 告诉 Git 去获取它有你没有的数据
git merge [alias]/[branch] # 将服务器上的任何更新（假设有人这时候推送到服务器了）合并到你的当前分支
</code></span></code></pre>
<h3 id="pull">pull</h3>
<p>下载远程代码并合并.</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git pull &lt;远程主机名&gt; &lt;远程分支名&gt;:&lt;本地分支名&gt;
</code></span></code></pre>
<p>将远程主机 origin 的 master 分支拉取过来，与本地的 brantest 分支合并。</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git pull origin master:brantest
git pull origin master # 与当前分支合并
</code></span></code></pre>
<h3 id="push">push</h3>
<p>上传远程代码并合并.</p>
<pre><code class="pre-wrap"><span style="overflow-x: auto; max-width:100%; display:inline;"><code class="language-shell">git push &lt;远程主机名&gt; &lt;本地分支名&gt;:&lt;远程分支名&gt;
git push &lt;远程主机名&gt; &lt;本地分支名&gt; # 本地分支名与远程分支名相同

[--force]: 强制推送.
</code></span></code></pre>
  </div>
</div>
 
    </div>
  </div>
  <div id="footer-background">
    <div id="footer">
      <div class="legal pure-g">
  <div class="pure-u-1 u-sm-1-2">
    <p class="legal-license"><a href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020038748号</a></p>
  </div>
  <div class="pure-u-1 u-sm-1-2">
    <p class="legal-links"><a href="https://github.com/zromyk">GitHub</a></p>
    <p class="legal-copyright">Copyright © 2021 Wei Zhou. 保留所有权利。</p>
  </div>
</div>
    </div>
  </div>
  <!-- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
  <script src="/style/html/jquery.min.js"></script>
  <script src='/style/article/latex/latest.js?config=TeX-MML-AM_CHTML'></script>
<!-- <script src="https://cdn.geogebra.org/apps/deployggb.js"></script> -->
<script src="/style/article/deployggb.js"></script>
<!-- <script src="https://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script> -->
<script type="text/javascript">
  // 脚本：navigation 随鼠标移动自动变换宽度
  var element = document.getElementById("navigation"); // 获取要操作的元素
  var elementWidth = parseInt(getComputedStyle(element).width);
  var elementLeft = 0;
  var elementRight = 0;
  element.addEventListener('mouseenter', function (event) { // 添加鼠标按下事件的监听器
    elementLeft = element.getBoundingClientRect().left - 10;
    elementRight = element.getBoundingClientRect().left + elementWidth * 3;
    window.addEventListener('mousemove', resize); // 添加全局的鼠标移动事件的监听器
  });

  function resize(event) {
    var minWidth = elementWidth;
    var maxWidth = elementWidth * 2.5;
    // console.log(elementLeft, event.clientX, elementRight, event.clientX - elementLeft + elementWidth / 2);
    if (elementLeft <= event.clientX && event.clientX <= elementRight) {
      var width = event.clientX - elementLeft + elementWidth / 2;
      width = Math.min(width, maxWidth);
      width = Math.max(width, minWidth);
      element.style.width = width + 'px'; // 设置新的宽度样式属性
    }
    else {
      element.style.width = elementWidth + 'px'; // 设置新的宽度样式属性
      stopResize();
    }
  }

  function stopResize() {
    element.style.width = elementWidth + 'px'; // 设置新的宽度样式属性
    // console.log("stopResize", elementLeft, event.clientX, elementRight, event.clientX - elementLeft + elementWidth / 2);
    window.removeEventListener('mousemove', resize); // 移除鼠标移动事件的监听器
  }
</script>
<script src="/style/article/highlight/highlight.min.js"></script>
<script type="text/javascript">
  // 脚本：code语法高亮
  hljs.initHighlightingOnLoad();
</script>
<script>
  function animateByNav() {
    $("html").animate({
        scrollTop: ($(event.target.hash).offset().top - 52)
    }, 300);
  };
</script>
<script src="/style/article/pell-1.0.6/dist/pell.js"></script>
<script>
  // 脚本：自由编辑页面
  var editor = window.pell.init({
    element: document.getElementById('editor'),
    defaultParagraphSeparator: 'p',
    onChange: function(html) {
        document.getElementById('text-output').innerHTML = html
        document.getElementById('html-output').textContent = html
    }
  });

  function markdownEditor() {
    var articles = document.getElementById('content-articles-markdown');
    if (articles.getAttribute("contenteditable") == "true") {
        articles.setAttribute("contenteditable", "false");
        document.getElementById("content-articles-markdownEditor").style.display = "none"; //隐藏
        document.getElementById("button-markdownEditor").innerHTML = "启用编辑";
    } else {
        articles.setAttribute("contenteditable", "true");
        document.getElementById("content-articles-markdownEditor").style.display = ""; //显示
        document.getElementById("button-markdownEditor").innerHTML = "关闭编辑";
    }
  };

  function save() {
      window.alert("保存成功");
  };
</script>

</body>
</html>
